<template>
  <div v-show="isShow" class="reportchartsDistrSub" style="height: 580px;" :style="'width:'+ (con_w/2 -10) + 'px'">
    <div class="con">
      <div
        class="repecharts"
        :id="timeId"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .reportchartsDistrSub {
    background: #fff;
    overflow: hidden;
    display: inline-block;
    margin-top: 13px;
    font-size: 0px;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
    }
    .echardiv{
      width: 100%;
      height: 420px;
    }
    .repecharts {
      width: 100%;
      height: 580px;
    }
    .con {
      position: relative;
      margin-top: 10px;
      .el-tabs {
        overflow: inherit;
        .el-tabs__header {
          width: 85px;
          .el-tabs__item {
            span {
              font-size: 16px;
              i {
                margin-right: 8px;
              }
            }
          }
        }
        .el-tabs__content {
          overflow: inherit;
          .tab-block{
            display: none!important;
          }
        }
      }
      .kpi{
        position: absolute;
        top: -45px;
        right:0;
        margin-right: 60px;
      }
      .kpis {
        position: absolute;
        left: 210px;
        top: -45px;
      }
    }
    .timeoption {
      position: absolute;
      right: 0;
      top: -55px;
      .on {
        .el-input--suffix {
          .el-input__inner {
            color: #e8eeff;
            background: #5580ff;
          }
        }
      }
      margin-right: 60px;
      line-height: 48px;
      label {
        font-size: 18px;
        vertical-align: top;
      }
      .el-select {
        display: inline-block;
        margin-left: 5px;
        width: 72px;
        height: 30px;
        .el-input__inner {
          box-sizing: border-box;
          height: 32px;
          text-align: center;
          padding: 0 18px 0 0;
          width: 100%;
          font-size: 14px;
        }
        .el-input {
          position: relative;
          z-index: 9;

          .el-input__suffix {
            .el-input__suffix-inner {
              line-height: 100%;
              display: inline-block;
            }
            right: 0;
            span {
              .el-select__caret {
                font-size: 12px;
                color: #8ba9ff;
              }
            }
          }
        }
      }
      .timebtn {
        float: right;
        display: block;
        height: 100%;
        padding-top: 10px;
        //margin-left: -3px;
        a,
        .el-radio {
          border: 1px solid #dbe1e5;
          border-left: none;
          margin: 0 !important;
          float: left;
          height: 30px;
          line-height: 30px;
          color: #737373;
          font-size: 14px;
          padding: 0 18px;
          cursor: pointer;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            padding: 0;
            line-height: 30px;
          }
          &.on,
          &.is-checked {
            color: #e8eeff !important;
            .el-radio__label {
              color: #e8eeff;
            }
            background: #5580ff !important;
          }
          &:first-child {
            border-left: 1px solid #dbe1e5;
            border-radius: 5px 0 0 5px;
          }
          &:last-child {
            border-radius: 0 5px 5px 0;
          }
          &:hover {
            background: #ebebeb;
            color: #333;
            opacity: 0.9;
          }
        }
      }
    }
  }
</style>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let kpiName = reportGlobal.name;
  let colorList = reportGlobal.colorList;
  export default {
    props: {
      con_w:{
        default:function () {
          return ''
        }
      },
      indicator_keys:{
        default:function () {
          return []
        }
      },
    },
    data() {
      return {
        Echarts:null,
        timeId:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts",
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
        kpiCheckType:[],
        option:{
          title: [],
          toolbox:{
            right: "30",
            top: "0",
            feature: {
              saveAsImage: { show: true }
            }
          },
          legend:{
            width:'90%',
            top: "15%",
            left:'center',
          },
          series:[],
        },
        record:'',   //记录指标点击为最后一个值
        isShow:true,
      }
    },
    watch: {
      con_w(val){
        this.loadEchartResize(val);
      },

    },
    mounted() {
      //默认分时
      this.Echarts = echarts.init(document.getElementById(this.timeId));
      this.defaultEchart();
      setTimeout(() => {
        this.loadEchartResize(this.con_w);
      }, 200);
    },
    methods:{
      UpData(data){
        console.log(data);
        if(!data){
          this.isShow = false
          return
        }
        this.isShow = true
        this.defaultEchart()
        this.option.series = []
        this.option.title = [ {
          text:'客流数据占比',
          textStyle:{
            fontSize:22,
            fontWeight:'bold',
            color:'#121212'
          },
          left:'center',
          top:'30px',
        }]
        let face_total_enters = data.face_total_enters ? data.face_total_enters : '';
        let face_repeats_enters = data.face_repeats_enters ? data.face_repeats_enters : '';
        let face_member_enters = data.face_member_enters ? data.face_member_enters : '';
        let radius = ''
        let center = ''
        let titleLeft = ''
        if(face_repeats_enters && face_member_enters){

          radius = '30%'
          center = [['25%', '60%'],['75%', '60%']]
          titleLeft = ['25%','75%']
        }else{
          radius = '45%'
          center = ['50%', '60%']
          titleLeft = ['50%']
        }
        //回头客
        if(face_repeats_enters){
          let val = (face_repeats_enters / face_total_enters)
          let color = colorList.face_repeats_enters
          let dataObj = {
            type: 'liquidFill',
            radius: radius,
            color: [color],
            center: center[0],
            data: [val],
            amplitude: 0,
            waveAnimation: 0,
            backgroundStyle: {
              borderWidth: 3,
              borderColor: color,
              color: '#fff',
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: color,
              }
            },
            label: {
              normal: { //此处没有生效，本地生效
                textStyle: {
                  fontSize: 20,
                  color: color,
                },
              },
            },
          }
          let titObj =   {
            subtext: `${kpiName.face_repeats_enters}占比`,
            left: titleLeft[0],
            top: '25%',
            textAlign: 'center',
            subtextStyle: {
              color: '#121212',
              fontSize: 18,
              fontWeight: 'bold',
            },
          }
          this.option.title.push(titObj)
          this.option.series.push(dataObj)
        }
        //会员
        if(face_member_enters){
          let val = (face_member_enters / face_total_enters)
          let color = colorList.face_member_enters
          let dataObj = {
            type: 'liquidFill',
            radius: radius,
            color: [color],
            center: center.length > 1 ? center[1] : center[0],
            data: [val],
            backgroundStyle: {
              borderWidth: 3,
              borderColor: color,
              color: '#fff',
            },
            outline: {
              itemStyle: {
                borderWidth: 3,
                borderColor: color,
              }
            },
            label: {
              normal: { //此处没有生效，本地生效
                textStyle: {
                  fontSize: 20,
                  color: color,
                },
              },
            },
          }
          let titObj =   {
            subtext: `${kpiName.face_member_enters}占比`,
            left: titleLeft.length > 1 ? titleLeft[1] : titleLeft[0],
            top: '25%',
            textAlign: 'center',
            subtextStyle: {
              color: '#121212',
              fontSize: 18,
              fontWeight: 'bold',
            },
          }
          this.option.title.push(titObj)
          this.option.series.push(dataObj)
          console.log(this.option,'this.option');
        }
        this.Echarts.setOption(this.option,true);
      },
      //设置成默认状态
      defaultEchart() {
        this.option.series = [];
        this.Echarts.setOption(this.defaultEcharts,true);
      },
      loadEchartResize(w) {
        let opts = { width: w/2 - 10 };
        this.Echarts.resize(opts);
      },
    }
  }
</script>

<style>
</style>